<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/icons/logo.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chrome Extension + Alpine + TS + Vite</title>
    <style>
      :root {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          Oxygen,
          Ubuntu,
          Cantarell,
          'Open Sans',
          'Helvetica Neue',
          sans-serif;

        color-scheme: light dark;
        background-color: #242424;
      }

      @media (prefers-color-scheme: light) {
        :root {
          background-color: #fafafa;
        }
        a:hover {
          color: #48a9c1;
        }
      }

      body {
        min-width: 20rem;
        margin: 0;
      }

      body {
        min-width: 20rem;
      }

      main {
        text-align: center;
        padding: 1em;
        margin: 0 auto;
      }

      h3 {
        color: #48a9c1;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: 200;
        line-height: 1.2rem;
        margin: 2rem auto;
      }

      a {
        font-size: 0.5rem;
        margin: 0.5rem;
        color: #cccccc;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <main x-data="options">
      <h3>Options Page</h3>
      <h4>Count from Popup: <span x-text="countSync"></span></h4>
      <a href="https://github.com/guocaoyi/create-chrome-ext" target="_blank">
        generated by create-chrome-ext
      </a>
    </main>
    <script type="module" src="/src/options/index.ts"></script>
  </body>
</html>
